$default-loading-prefix-cls: #{$jigsaw-prefix}-loading;

.#{$default-loading-prefix-cls}-host{
    @include inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.loadingProcess {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    transform: rotate(-90deg);
    animation-name: loadingContainerRotate;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-direction: reverse;
    animation-iteration-count: infinite;
}

@keyframes loadingContainerRotate {
    0% {
        transform: rotate(-90deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

.circleContainer {
    width: 100%;
    height: 100%;
}

.circle {
    transition: all .4s;
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 20, 300;
    stroke-dashoffset: 0;
    animation-duration: 0.6s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.circleWhite {
    stroke: #ffffff;
    animation-name: circleWhiteMotion;
    animation-timing-function: linear;
}

@keyframes circleWhiteMotion {
    0% {
        stroke-dasharray: 30, 300;
    }
    100% {
        stroke-dasharray: 80, 300;
    }
}

.circleYellow {
    stroke: #ffcc66;
    animation-name: circleYellowMotion;
    animation-timing-function: cubic-bezier(0.7, 0.4, 0.4, 0.7);
}

@keyframes circleYellowMotion {
    0% {
        stroke-dasharray: 30, 300;
    }
    100% {
        stroke-dasharray: 110, 300;
    }
}

.circleGreen {
    stroke: #99cc66;
    animation-name: circleGreenMotion;
    animation-timing-function: cubic-bezier(0.8, 0.7, 0.45, 0.6);
}

@keyframes circleGreenMotion {
    0% {
        stroke-dasharray: 30, 300;
    }
    100% {
        stroke-dasharray: 140, 300;
    }
}
